<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<body>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>派发计划</title>

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>


<body style="height: 600px">
<table id="demo" lay-filter="test"></table>
<%--修改--%>
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-container">
        <form class="layui-form" action="#" id="upfm">
            <%--<div class="layui-form-item">--%>
                <%--<label class="layui-form-label">编号</label>--%>
                <%--<div class="layui-input-block">--%>
                    <%--<input type="text" name="productionPlanId" id="productionPlanId" lay-verify="required" placeholder="编号" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>


                <%--<div class="layui-form-item">--%>
                    <%--<label class="layui-form-label">编号</label>--%>
                    <%--<div class="layui-input-block">--%>
                        <%--<!-- 设置为只读状态 -->--%>
                        <%--<input type="text" name="productionPlanId" id="productionPlanId"readonly lay-verify="required" autocomplete="off" class="layui-input">--%>
                    <%--</div>--%>
                <%--</div>--%>


                <%--原来的--%>
                <%--<div class="layui-form-item">--%>
                <%--<label class="layui-form-label">订单id</label>--%>
                <%--<div class="layui-input-block">--%>
                    <%--<input type="text" id="orderId" name="orderId" lay-verify="required" placeholder="订单id" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
                <div class="layui-form-item">
                    <label class="layui-form-label">订单id</label>
                    <div class="layui-input-block">
                        <!-- 设置为只读状态 -->
                        <input type="text" name="orderId" id="orderId"readonly lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">商品id</label>
                    <div class="layui-input-block">
                        <input type="text" id="productDetailId" name="productDetailId" lay-verify="required" placeholder="商品id" autocomplete="off" class="layui-input">
                    </div>
                </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排班时间</label>
                <div class="layui-input-block">
                    <input type="text" id="scheduleTime" name="scheduleTime" lay-verify="required" placeholder="排班时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">计划生产量</label>
                <div class="layui-input-block">
                    <input type="text" id="schedeleCount" name="schedeleCount" lay-verify="required" placeholder="计划生产量" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <input type="text" id="departmentId" name="departmentId" lay-verify="required" placeholder="部门" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">尺码</label>
                <div class="layui-input-block">
                    <input type="text" id="sizeId" name="sizeId" lay-verify="required" placeholder="尺码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit onclick="updateProduct()" lay-filter="submitForm">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</div>
</body>


<%--增加--%>
<div class="layui-row" id="popAssignTask" style="display:none;">
    <div class="layui-container">
        <form class="layui-form" action="#" id="addfm">

        <%--<div class="layui-form-item">--%>
                <%--<label class="layui-form-label">编号</label>--%>
                <%--<div class="layui-input-block">--%>
                    <%--<input type="text" name="productionPlanId"  lay-verify="required" placeholder="编号" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
            <%--<input type="text" name="productionPlanId" value="Initial value" readonly="true">--%>

            <div class="layui-form-item">
                <label class="layui-form-label">订单id</label>
                <div class="layui-input-block">
                    <input type="text"  name="orderId" lay-verify="required" placeholder="订单id" autocomplete="off" class="layui-input">
                </div>
            </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品id</label>
                    <div class="layui-input-block">
                        <input type="text"  name="productDetailId" lay-verify="required" placeholder="商品id" autocomplete="off" class="layui-input">
                    </div>
                </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排班时间</label>
                <div class="layui-input-block">
                    <input type="text"   name="scheduleTime" lay-verify="required" placeholder="排班时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">计划生产量</label>
                <div class="layui-input-block">
                    <input type="text"  name="schedeleCount" lay-verify="required" placeholder="计划生产量" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <%--<input type="text"  name="departmentId" lay-verify="required" placeholder="部门" autocomplete="off" class="layui-input">--%>
                    <select name="departmentId"  lay-verify="required">
                        <option value="-1" id="d_op">请选择部门</option>
                        <option value="1">裁剪部</option>
                        <option value="2">缝纫部</option>
                        <option value="3">质检部</option>
                        <option value="4">厂长</option>
                        <option value="5">技术科</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">尺码</label>
                <div class="layui-input-block">
                    <%--<input type="text"  name="sizeId" lay-verify="required" placeholder="尺码" autocomplete="off" class="layui-input">--%>
                    <select name="sizeId" lay-verify="required">
                        <option value="-1" id="s_op">请选择尺码</option>
                        <option value="1">S</option>
                        <option value="2">M</option>
                        <option value="3">L</option>
                        <option value="4">XL</option>
                        <option value="5">XXL</option>
                        <option value="6">3XL</option>
                        <option value="7">4XL</option>
                    </select>
                </div>
            </div>
        </form>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit onclick="addProduct()" lay-filter="submitForm">确认增加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</div>
</body>



<script type="text/javascript">

    layui.use(['jquery','layer','table','form'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '${pageContext.request.contextPath}/productionplans/getProductionPlan' //数据接口
            ,page: true //开启分页
            ,totalRow: true // 开启合计行
            ,limit:3
            ,limits:[3,6,9]
            ,toolbar: '#toolbarDemo',
            cols: [[ // 表头配置
                {field: 'productionPlanId', title: '编号',sort: true, fixed: 'left'}
                ,{field: 'orderId', title: '订单号',sort: true}
                ,{field: 'productDetailId', title: '商品id',sort: true}
                ,{field: 'scheduleTime', title: '排班时间',sort: true}
                ,{field: 'schedeleCount', title: '计划生产量',sort: true}
                ,{field: 'departmentId', title: '部门'}
                ,{field: 'sizeId', title: '尺码'}
                ,{field: '', title: '操作',toolbar: "#barDemo"}

            ]]
        });
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            // 初始化日期选择器
            laydate.render({
                elem: '#scheduleTime', // 绑定的元素ID
                type: 'date' // 设置日期选择的类型，这里是日期类型
            });
        });


        //删除的的代码以及修改的弹窗
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data.productionPlanId+0;
            // console.log(data)
            if(obj.event === 'deletePlan'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax( {
                        "url"            :'${pageContext.request.contextPath}/productionplans/deleteproductionPlanById',
                        "type"         :  "get",
                        "data"         :  {"productionPlanId":data},
                        "dataType" :  "json",
                        // contentType:"application/json;charset=utf-8",
                        "success"  :  function(result) {
                            layer.msg(result.message);
                            console.log(result.code);
                            if(result.code==20000){
                                table.reload("demo");
                            }
                        },
                        "error"       :  function() {
                            alert("出错了")
                        }
                    } );
                    layer.close(index);
                });

            }else if(obj.event === 'modifyStu'){
                $("#productionPlanId").val(obj.data.productionPlanId);
                $("#orderId").val(obj.data.orderId);
                $("#productDetailId").val(obj.data.productDetailId);
                $("#scheduleTime").val(obj.data.scheduleTime);
                $("#schedeleCount").val(obj.data.schedeleCount);
                $("#departmentId").val(obj.data.departmentId);
                $("#sizeId").val(obj.data.sizeId);
                layui.form.render('select', 'upfm'); // 重新渲染select元素
                layer.open({
                    title: '编辑',
                    type: 1,
                    area: ['80%','90%'],
                    content:  $("#popUpdateTest"),
                    end: function () {
                        $("#popUpdateTest").hide(); // 在关闭弹窗时隐藏盒子
                    }
                });

            }
        });
        // 监听工具栏按钮点击事件
        table.on('toolbar(test)', function(obj){
            switch(obj.event){
                case 'addPlantest':
                    layer.open({
                        title: '分配任务',
                        type: 1,
                        area: ['80%','90%'],
                        content: $('#popAssignTask'),
                        success: function(layero){
                            form.render();
                        },
                        end: function () {
                            $("#popAssignTask").hide(); // 在关闭弹窗时隐藏盒子
                            resetFormFields()
                        }

                    });
                    break;
            }
        });

        // 监听表单提交
        form.on('submit(submitForm)', function(data){
            // 提交表单的逻辑处理
            console.log(data.field);
            return false; // 阻止表单跳转
        });
    });
    // 关闭分配任务弹窗
    function closeAssignTask() {
        layer.closeAll();
        $('#popAssignTask').hide();
        resetFormFields(); // 调用函数来重置表单字段
    }
    // 重置表单字段的函数
    function resetFormFields() {
        $('#popAssignTask').find('input, textarea').val('');
        form.render();
    }

</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addPlantest">分配任务</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deletePlan">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="modifyStu">修改</a>
</script>

<script type="text/javascript">
    //修改的代码
    function updateProduct() {
        var data =fmobjToObj($("#upfm"));
        console.log("xiugai");
        $.ajax({
            url:'${pageContext.request.contextPath}/productionplans/updateProductionPlan',
            type:'POST',
            data:JSON.stringify(data),
            dataType:"text",
            contentType:"application/json;charset=UTF-8",
            "beforeSend": function() {     //请求之前的方法
                console.log("我要发送请求了");
            },
            "success"  :  function(result) {  // 请求成功后要执行的代码
                // alert(JSON.stringify(result))
                if (result=="success"){
                    alert("修改成功");
                    window.location.href="toPlanList";
                }else {
                    alert("修改失败");
                }
            },
            "error"       :  function() {     // 请求失败后要执行的代码
                alert("网络正忙，请稍等！！！")
            }
        } );
    }
    function  fmobjToObj(fmobj){
        var o = {};
        var a = fmobj.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

</script>

<%--ajax增加--%>
<script type="text/javascript">

    function addProduct() {
        var  ProductionPlan= fmobjToObj($("#addfm"));
        $.ajax({
            url     :  '${pageContext.request.contextPath}/productionplans/addproductionPlan',    // 要提交的URL路径
            type    :  "post",      // 发送请求的方式
            contentType:"application/json",
            data    : JSON.stringify(ProductionPlan) ,      // 要发送到服务器的数据
            dataType :  "json",     // 预期接收到的数据格式
            "beforeSend": function() {     //请求之前的方法
                console.log("我要发送请求了");
            },
            "success"  :  function(result) {  // 请求成功后要执行的代码
                alert(JSON.stringify(result))
                if (result.code===20000){
                    alert("添加成功");
                    window.location.href="toPlanList";
                }else {
                    alert("添加失败");
                }
            },
            "error"       :  function() {     // 请求失败后要执行的代码
                alert("网络正忙，请稍等！！！")
            }
        })
    }

    function  fmobjToObj(fmobj){
        var o = {};
        var a = fmobj.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

</script>
</body>
</html>



